<template>
  <a-card :bordered="true" title="高级选择框" style="margin-bottom: 30px">
    <a-row style="margin-bottom: 10px">
      <a-col :span="4">
        <div class="example-side">
          demo1:高级选择框
        </div>
      </a-col>
      <a-col :span="8">
        <div class="example-side">
          <!--------------------------------------------------------------------------------------demo1---start-->
          <a-auto-complete
            @search="handleSearch"
            @select="handleSelect"
            placeholder="请选择"
            style="width: 60%"
            v-model="demo1.tmp"
          >
            <template slot="dataSource">
              <a-select-option :key="index" :value="item.value" v-for="(item,index) in demo1.tmpList">{{ item.label
              }}
              </a-select-option>
            </template>
          </a-auto-complete>
          <!--------------------------------------------------------------------------------------demo1---end-->
          <a-button @click="clear" style="margin-left: 8px">重置</a-button>
        </div>
      </a-col>
      <a-col :span="12" class="example-side">
        <div>
          当前选择: {{ demo1.tmp }}
        </div>
        <div>
          当前显示: {{ demo1.tmp | dictFilter(demo1.dropDownList) }}
        </div>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import moment from 'moment'

export default {
  name: 'HighLevelSelectBox',
  components: {},
  data () {
    return {
      moment,
      demo1: {
        tmp: undefined,
        dropDownList: [
          {
            label: '测试1',
            value: '1'
          },
          {
            label: '测试2',
            value: '2'
          },
          {
            label: '测试3',
            value: '3'
          },
          {
            label: '测试12',
            value: '4'
          },
          {
            label: '测试13',
            value: '5'
          },
          {
            label: '测试23',
            value: '6'
          },
          {
            label: '测试123',
            value: '7'
          }
        ],
        tmpList: []
      }
    }
  },
  methods: {
    handleSearch (value) {
      this.demo1.tmpList = this.demo1.dropDownList.filter(item => {
        return item.label.indexOf(value) !== -1
      })
    },
    handleSelect (val) {
      this.demo1.tmp = val
    },
    clear () {
      this.demo1.tmpList = []
      this.demo1.tmp = undefined
    }
  }
}
</script>

<style scoped>
</style>
